<template>
  <div id="product-reply-list-page">
    <div class="top-box" :style="{
      top:(this.getSafeArea().top-4)+'px',
         }">
      <div class="page-title">
        <div id="back-button" @click="$router.push('/ProductDetail?id='+$route.query.id)">
          <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
        </div>
        <span>商品评价</span>
      </div>

      <div class="title-box">
        <div class="title">
          <button :class="isImage===0?'curr':''" @click="changeIsImage(0)">全部</button>
          <button :class="isImage===1?'curr':''" @click="changeIsImage(1)">视频/图片</button>
        </div>

        <!--        <div class="show-only-model">
                  <el-checkbox v-model="onlyCurrModel">
                    只看当前商品
                  </el-checkbox>
                </div>-->
      </div>

<!--      <div class="tag-list">-->
<!--        <div class="item" v-for="(item,index) in hotTagList" :key="index" :class="currTagName===item.hotTag?'curr':''"-->
<!--             @click="changeHotTag(item.hotTag)">-->
<!--          <span v-text="item.hotTag+'('+item.count+')'"></span>-->
<!--        </div>-->
<!--        <div class="c"></div>-->
<!--      </div>-->
    </div>

    <i-scroller-box
      class="reply-list"
      ref="i-scroller-box"
      :url="'ShopProduct/getProductReplyList'"
      :height="this.getWinSize().height-this.getSafeArea().top-90"
      style="position: relative;"
      :style="{
      top:(74+this.getSafeArea().top)+'px'
      }">
      <template v-slot:list-item="{index,data}">
        <reply-list-item :reply-params="data"></reply-list-item>
      </template>
    </i-scroller-box>


  </div>
</template>

<script>
import ReplyList from '../common/ReplyList'
import ProductListItem from '../common/ProductListItem'
import IScrollerBox from '../common/IScrollerBox'
import ReplyListItem from '../common/ReplyListItem'

export default {
  name: 'ProductReplyList',
  components: {ReplyListItem, IScrollerBox, ProductListItem, ReplyList},
  mounted () {
    this.detail.id = this.$route.query.id
    this.detail.name = this.$route.query.name
    this.getList()
    this.currListStyle = {
      width: this.getWinSize().width + 'px',
      height: (this.getWinSize().height-this.getSafeArea().top - 50) + 'px',
    }
  },
  data: function () {
    return {
      isImage: 0,           // 限时类型: 0.全部  1.仅显示有图片/视频
      currTagName: '',
      onlyCurrModel: false,  // 是否当前型号
      currListStyle: {},
      detail: {
        id: 0,
        name: '',
      },
      hotTagList: [],
      replyList: []
    }
  },
  methods: {
    changeIsImage: function (isImage) {
      this.isImage = isImage
      this.getList()
    },
    // changeHotTag: function (hotTag) {
    //   if (this.currTagName === hotTag) {
    //     this.currTagName = ''
    //   } else {
    //     this.currTagName = hotTag
    //   }
    //   this.getList()
    // },
    getList: function () {
      this.$refs['i-scroller-box'].getList({
        form:{
          isImage:this.isImage === 1?1:0,
          id:this.$route.query.id,
        },
        page:1,
        pageSize:10,
      })
    }
  }
}
</script>

<style scoped>

</style>
